<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/my/jquery-1.11.0.js"></script>
		<script type="text/javascript" src="../js/my/websocket.js"></script>
		<link rel="stylesheet" href="bootstrap.min.css" />
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.signal {
				width: 200px;
				height: 200px;
				border-radius: 100px;
			}
			
			.maintain {
				margin-top: 10px;
				width: 98%;
				height: auto;
				border-radius: 15px;
				background: white;
				border: 2px solid lightgray;
			}
			
			.success {
				background: lightgreen;
				opacity: .5;
			}
			
			.danger {
				background: orangered;
				opacity: .5;
			}
			
			.info {
				background: dodgerblue;
				opacity: .5;
			}
			
			ul {
				list-style: none;
				display: inline;
			}
			
			ul li {
				display: inline-block;
				padding: 20px;
			}
			
			.signal-desc {
				display: inline-block;
				margin-top: 50px;
				height: 30px;
				padding: 10px 0;
				width: 100%;
				text-align: center;
				font-size: 24px;
				font-family: "微软雅黑";
				font-weight: bold;
				color: orangered;
			}
			
			.signal-value {
				display: inline-block;
				height: 50px;
				width: 100%;
				margin-top: 10px;
				margin-bottom: 40px;
				text-align: center;
				font-size: 24px;
				font-family: "微软雅黑";
				font-weight: bold;
			}
			
			.mainstatus {
				width: 100%;
				padding: 10px auto;
				padding-top: 100px;
			}
			
			.main-status-list {
				width: 98%;
				height: auto;
				background: lightgray;
				border-radius: 15px;
				padding: 20px;
			}
		</style>

		<script>
			$(document).ready(function() {
				var websocketClient = new WebsocketClient("");
				websocketClient.initialize();
				window.websocketClient = websocketClient;
				var signal_option = {
					"plantID": 1,
					"signalTypes": []
				};
				$("input[type='checkbox']").change(function() {
					signal_option.signalTypes = [];
					$.each($("input[type='checkbox']:checked"), function(key, value) {
						var signalName = $(value).attr("data-signalName");
						if (signalName) {
							signal_option.signalTypes.push(signalName);
						}
					});
					window.websocketClient.sendMessage(JSON.stringify(signal_option));
				});
			});
		</script>
	</head>

	<body>
		<div style="width: 100%;height: auto;" align="center">

			<div style="margin: 20px 0;">
				<input type="checkbox" name="speed" data-signalName="speed" />速度
				<input type="checkbox" name="powder" data-signalName="power" />有效功率
				<input type="checkbox" name="error" data-signalName="errorcount" />故障数
			</div>
			<div class="maintain" align="center">

				<ul>
					<li>
						<div id="speed_signal" class="signal success">
							<div class="signal-desc">
								速度
							</div>

							<div class="signal-value">
								<span>50</span><span>km/h</span>
							</div>
						</div>
					</li>
					<li>
						<div id="power_signal" class="signal info">
							<div class="signal-desc" style="color: white;">
								有功功率
							</div>

							<div class="signal-value">
								<span>50</span><span>KW</span>
							</div>
						</div>
					</li>
					<li>
						<div id="error_signal" class="signal danger">
							<div class="signal-desc" style="color: white;">
								故障数
							</div>

							<div class="signal-value">
								<span>200</span>
							</div>
						</div>
					</li>
				</ul>

			</div>

		</div>

		<div id="mainstatus_signal" class="mainstatus" align="center">
			<div style="margin: 20px 0;">
				<input type="checkbox" name="mainstatus" data-signalName="mainstatus" />主状态信号
				<!--<input type="checkbox" name="reverse-no-error" checked="checked" readonly="readonly"/>逆变器无故障
				<input type="checkbox" name="allow-release" checked="checked" readonly="readonly"/>允许脉冲释放
				<input type="checkbox" name="sys-unlock" checked="checked" readonly="readonly"/>系统未锁死
				<input type="checkbox" name="voltage-running" checked="checked" readonly="readonly"/>输入电压正常
				<input type="checkbox" name="heat-sink" checked="checked" readonly="readonly"/>散热风机启动
				<input type="checkbox" name="toucher-close" checked="checked" readonly="readonly"/>接触器闭合-->
			</div>
			<div class="main-status-list">
				<ul>
					<li>

						<div class="signal info" id="start-condition">

							<div class="signal-desc" style="color: white;">
								启动条件满足
							</div>

							<div class="signal-value" data-signalName='启动条件满足'>
								<span>ON</span>
							</div>

						</div>
					</li>
					<li>
						<div class="signal info" id="reverse-no-error">
							<div class="signal-desc" style="color: white;">
								逆变器无故障
							</div>

							<div class="signal-value" data-signalName='逆变器无故障'>
								<span>OFF</span>
							</div>
						</div>
					</li>
					<li>
						<div id="allow-release" class="signal info">
							<div class="signal-desc" style="color: white;">
								允许脉冲释放
							</div>

							<div class="signal-value" data-signalName='允许脉冲释放'>
								<span>OFF</span>
							</div>
						</div>
					</li>
					<li>
						<div id="sys-unlock" class="signal info">
							<div class="signal-desc" style="color: white;">
								系统未锁死
							</div>

							<div class="signal-value" data-signalName='启动条件满足'>
								<span>OFF</span>
							</div>
						</div>
					</li>
					<li>
						<div id="voltage-running" class="signal info">
							<div class="signal-desc" style="color: white;">
								输入电压正常
							</div>

							<div class="signal-value" data-signalName='输入电压正常'>
								<span>OFF</span>
							</div>
						</div>
					</li>
					<li>
						<div id="heat-sink" class="signal info" >
							<div class="signal-desc" style="color: white;">
								散热风机启动
							</div>

							<div class="signal-value" data-signalName='散热风机启动'>
								<span>OFF</span>
							</div>
						</div>
					</li>
					<li>
						<div id="toucher-close" class="signal info" >
							<div class="signal-desc" style="color: white;">
								接触器闭合
							</div>

							<div class="signal-value" data-signalName='接触器闭合'>
								<span>OFF</span>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

	</body>

</html>